import React from 'react'
// 引入react-redux相关的包
// 第一个是获取store里面dispatch的,第二个是获取store里面数据的s
import { useDispatch, useSelector } from "react-redux";
// 引入countSlice中的action
import { increment,decrement } from "../../store/slice/countSlice";
/* 
  react-redux提供了两个hook 用来操作redux
    - useDispatch() 得到一个dispatch方法
    - useSelector() 参数是一个回调函数,回调函数的形参就是store中的数据
*/
export default function Count() {
    // useDispatch()获取dispatch方法
    const dispatch = useDispatch() 

    // useSelector() 获取store中的数据
    // 回调函数的形参state就是store中的数据
    const count = useSelector(state=>{
        return state.count.count
    })
    // useSelector的形参可以用state表示,这个形参就是store中的数据
    // const  movieList = useSelector(state=>{
    //     return state.movie.movieList
    // })


    const increamentHandle=()=>{
        dispatch(increment(10))
    }
    const decreamentHandle=()=>{
        dispatch(decrement(5))
    }
    const ifevenIncreamentHandle=()=>{
      if(count%2===0){
        dispatch(increment(1))
      }
    
    }

  return (
    <div>
        <h1>我是count组件,我的值是{count}</h1>
        <h2>movie请求的电影数据是{}个</h2>
        <button onClick={increamentHandle}>累加</button>
        <button onClick={decreamentHandle}>累减</button>
        <button onClick={ifevenIncreamentHandle}>遇到偶数就加1</button>
    </div>
  )
}
